.box {
	/* 	-moz-display: flex;
	-webkit-display: flex; */
	display: flex;
	flex-direction: column;
	width: 18%;
	box-shadow: 0 0 6px #ddd;
	border: 1px solid #ddd;
	min-width: 200px;
	max-height: 500px;
	padding: 8px;
	margin: 6px 3px;
	/* 控制的是纵向排列的元素在主轴方向(水平方向)的排列方式，align-content是对align-items的补充，参考：https://blog.csdn.net/zSY_snake/article/details/80200089 */
	align-items: center;
	/* 设置纵向排列的，图片、h2、h4等元素，两端对齐 */
	align-content: space-between;
	cursor: pointer;
	/* transition过渡，依次写：过渡属性，过渡时间，过渡函数，过渡延时时间 */
	/* .box .box:hover要配合使用，来设置动画 */
	transition: all 0.3s ease;
	h2 {
		font-size: 16px;
	}
	h4 {
		/* width不设置，text-overflow:ellipsis;也是失效的，h4不固定宽度，无法overflow的 */
		width: 100%;
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		/* 文本溢出显示省略号，需要配合white-space和overflow两个属性才起作用 */
		text-overflow: ellipsis;
		align-self: flex-start;
		> span {
			font-size: 14px;
		}
	}
	.img {
		height: 160px;
		width: 108px;
		margin-bottom: 0.5em;
	}
	ul {
		list-style-type: none;
		padding-left: 0;
		margin-bottom: 0;
	}
	/* box动画,鼠标经过动画 */
	&:hover {
		transform: rotate(2deg) scale(1.03);
		opacity: 0.7;
	}
}
